<template>
  <div class="mainnav_content">
    <!-- 顶部导航条 -->
    <HeaderBar></HeaderBar>
    <div class="main_nav con_width">
      <!-- logo -->
      <div class="logo_box">
        <router-link to="/">
          <div class="icon_box" title="小米官网">
            <img class="logo_icon" src="images/home-logo.png" alt />
            <img class="logo_icon" src="images/mi-logo.png" alt />
          </div>
        </router-link>
      </div>
      <!-- 选项navbar -->
      <div class="main_navbar">
        <ul class="navbar_ul">
          <li>
            小米手机
            <div class="recom_show">
              <MainRecom goodsUrl="json/shouji.json"></MainRecom>
            </div>
          </li>
          <li>Redmi红米</li>
          <li>电视</li>
          <li>
            笔记本
            <div class="recom_show">
              <MainRecom goodsUrl="json/diannao.json"></MainRecom>
            </div>
          </li>
          <li>家电</li>
          <li>路由器</li>
          <li>智能硬件</li> 
          <li>服务</li>
          <li>社区</li>
        </ul>
      </div>
      <!-- 搜索 296px -->
      <div class="search_box">
        <div class="search">
          <input class="input_box" type="text" />
          <div class="search_btn">
            <!-- <i class="fa fa-search"></i> -->
            <i class="iconfont icon-sousuo"></i>
          </div>
          <!-- 搜索框推荐内容 -->
          <div class="search_info">
            <ul>
              <li>小米9 Pro 5G</li>
              <li>Redmi Note 8</li>
            </ul>
          </div>
          <!-- 搜索记录内容 -->
          <div class="search_history">
            <ul>
              <li>小米9 Pro 5G</li>
              <li>Redmi Note 8</li>
              <li>小爱音箱</li>
              <li>小米手环</li>
              <li>小米电视</li>
              <li>小米空调</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import HeaderBar from "../HeaderBar/HeaderBar.vue";
import MainRecom from "../MainRecom/MainRecom.vue";
export default {
  components: {
    HeaderBar,
    MainRecom
  }
};
</script>
<style lang="scss" scoped>
@import "./MainNav.scss";
</style>